<template>
	<div class="pay-lv">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				支付升级
			</div>
		</div>
		<div class="pl-items">
			<div class="pl-item" @click="check(1)">
				<input class="radio" type="radio" v-model="num" name="pay" :class="{active: current == 1}">
				<span>{{month}}(元)/月</span>
			</div>
			<div class="pl-item" @click="check(2)">
				<input class="radio" type="radio" v-model="num" name="pay" :class="{active: current == 2}">
				<span>{{year}}(元)/年</span>
			</div>
			<div class="pl-item" @click="check(3)">
				<input class="radio" type="radio" v-model="num" name="pay" :class="{active: current == 3}">
				<span>{{forever}}(元)/永久</span>
			</div>
		</div>
		<div class="pl-footer">
			<p @click="showpay()">支付</p>
			<span>注:请仔细核对用户信息</span>
		</div>
		<div class="ac-dialog"
			v-show="isPay"
			@click="isPay = false"
		>
			<div class="ac-d-content"
				@click.stop="isPay=true"
			>
				<div class="ac-d-item"
					@click="pay(1)"
					v-if="wx_login == 1 && wxpay_bool == 1"
				>
					<img src="../assets/img/share/wx.png" />
					<p>微信</p>
				</div>
				<div class="ac-d-item"
					@click="pay(2)"
					v-if="alipay_bool == 1"
				>
					<img src="../assets/img/alipay.png" />
					<p>支付宝</p>
				</div>
			</div>			
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				type: 'wxpay',
				isPay: false,
				current: 1,
				num: 0,
				month: this.$route.params.month || 0,
				year: this.$route.params.year || 0,
				forever: this.$route.params.forever || 0,
				wxpay_bool: window.localStorage.getItem("wxpay_bool"),
				alipay_bool: window.localStorage.getItem("alipay_bool"),
				wx_login: window.localStorage.getItem("wx_login"),
			}
		},
		methods: {
			check(id){
				this.current = id;
				if (id==1) {
					this.num = 1;
				}else if (id == 2) {
					this.num = 12
				}else{
					this.num = 999
				}
			},
			showpay(){
				this.isPay = true
			},
			pay: function(id){
				if( id == 1){
					this.type = 'wxpay'
					var params = new URLSearchParams();
					params.append('type', this.type);
					params.append('month', this.num);
					axios.post(Http.JIONPAY,params)
					.then( res => {
						var ret = res.data;
						var retData = ret.data.orderStr;
						if (typeof WeixinJSBridge == "undefined"){
						   if( document.addEventListener ){
						       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						   }else if (document.attachEvent){
						       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
						       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						   }
						}else{
						   onBridgeReady();
						}
						function onBridgeReady(){
						   	WeixinJSBridge.invoke(
						      	'getBrandWCPayRequest', {
							        "appId":retData.appid,     //公众号名称，由商户传入     
							        "timeStamp": retData.timestamp,         //时间戳，自1970年以来的秒数     
							        "nonceStr": retData.noncestr, //随机串     
							        "package": "prepay_id=" + retData.prepayid,     
							        "signType": "MD5",         //微信签名方式：     
							        "paySign": retData.sign
						      	},
						      	function(res){
						      		alert(JSON.stringify(res));
						      		if(res.err_msg == "get_brand_wcpay_request:ok"){
							      		Toast("支付成功")
						      		}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
						      			Toast("支付取消")
						      		}else{
						      			Toast("支付失败")
						      		}
						   		}
						   	);
						}
					})
					
				}else if( id == 2 ){
					this.type = 'alipay'
					var params = new URLSearchParams();
					params.append('type', this.type);
					params.append('month', this.num);
					axios.post(Http.JIONPAY,params)
					.then( res => {
						var ret = res.data;
						// const div = document.createElement('div')
						// document.getElementById("pay").innerHTML = ret.data.orderStr;
						// // console.log(div);
						// // document.body.appendChild(div)
						// this.$nextTick(() => {
						// 	document.forms[0].submit()
						// })
						let routerData = this.$router.resolve({
							path: '/user/alipay',
							query: {
								htmls: ret.data.orderStr
							}
						})
						var htmls = ret.data.orderStr
						window.open(routerData.href, '_ blank')
						const div = document.createElement("div");
						div.innerHTML = htmls;
						document.body.appendChild(div);
						document.forms[0].submit();
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.pay-lv{
		position: fixed;
		height: 100%;
		width: 100%;
		background: #f5f5f5;
		.pl-items{
			padding: 0.2rem 0;
			background: #f5f5f5;
			width: 100%;
			.pl-item{
				height: 0.8rem;
				line-height: 0.8rem;
				margin-bottom: 0.2rem;
				background: #fff;
				text-align: left;
				padding: 0 0.24rem;
				.radio{
					position: relative;
					margin-right: 0.2rem;
					width: 0.5rem;
					height: 0.5rem;
					border-radius: 0.5rem;
					border: 0.01rem solid #e1e1e1;
					transition: all .3s;
					&.active{
						border: none;
						border: 0.01rem solid #fb9170;
						&::after{
							opacity: 1;
    						transform: scale(1);
						}
					}
					&::after{
						position: absolute;
					    width: 0.3rem;
					    height: 0.3rem;
					    left: 0.09rem;
					    top: 0.09rem;
					    border-radius: 50%;
					    content: "";
					    background-color: #fd5b28;
					    opacity: 0;
					    transform: scale(0);
					    transition: all .3s cubic-bezier(.78,.14,.15,.86);
					}
				}
			}
		}
		.pl-footer{
			p{
				width: 100%;
				height: 0.8rem;
				line-height: 0.8rem;
				background: #fff;
				margin-bottom: 0.2rem;
			}
			span{
				color: #999;
			}
		}
		.ac-dialog{
			position: fixed;
			top: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			.ac-d-content{
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 0.4rem 0;
				background: #fff;
				.ac-d-item{
					flex: 0 0 50%;
					img{
						width: 0.88rem;
						margin-bottom: 0.2rem;
					}
					p{
						font-size: 0.26rem;
					}
				}
			}
		}
	}
</style>